
<*
* 奖励兑现
* prizeExchange
* edit by ZHANGKE
*>

<template>
    <div class="prize-exchange-section">
        <!--奖励兑现 prizeExchange -->
        <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
            <el-tab-pane label="兑现清单" name="order">
                <el-form :inline="true" :model="sForm" class="demo-form-inline">
                    <el-form-item label="抽奖：">
                        <el-select  v-model="sForm.awardName" placeholder="请选择" clearable value="">
                            <el-option
                                    v-for="item in orderStatus"
                                    :key="item.awardName"
                                    :label="item.awardName"
                                    :value="item.pageidBigint"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="昵称：">
                        <el-input v-model="sForm.nickName" clearable></el-input>
                    </el-form-item>

                    <el-form-item label="中奖码：">
                        <el-input  v-model="sForm.redemptionCode" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchOrder">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-table
                        :data="tableOrderData"
                        border
                        style="width: 100%">
                    <el-table-column
                            prop="profile"
                            label="头像"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="昵称"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="code"
                            label="中奖码"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="prizeName"
                            label="奖项"
                            width="">
                    </el-table-column>
                    <el-table-column
                            prop="prize"
                            label="奖品"
                            width="">
                    </el-table-column>
                    <el-table-column
                            prop="isGot"
                            label="是否领取"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="gotDate"
                            label="领取时间"
                            width="">
                    </el-table-column>
                    <el-table-column
                            prop="oPerson"
                            label="发放人"
                            width="">
                    </el-table-column>
                    <el-table-column
                            prop="remark"
                            label="备注">
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="互动管理员" name="person">

                <interactAdmin ref="interactAdmin">
                </interactAdmin>


            </el-tab-pane>
        </el-tabs>

        <modal :visible="personDialogVisible" title="添加发放人" width="650" @close="personDialogVisible = false">
            <el-form ref="form" :model="pForm" label-width="110px" size="mini">
                <el-form-item label="昵称">
                    <el-input v-model="pForm.name" ></el-input>
                </el-form-item>
                <el-form-item label="头像">

                </el-form-item>

            </el-form>

            <div class="content-footer">
                <el-button @click="personDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="personSubmitDialog">确定</el-button>
            </div>
        </modal>

    </div>
</template>

<script>
    import interactAdmin from '../pageSetting/scrollScreenChips/interactAdmin';
    export default {
        name: 'prizeExchange',
        components: {
            interactAdmin
        },
        data() {
            return {
                activeName: 'order',
                orderStatus:[{label:'抽奖1',code:'1'},{label:'抽奖2',code:'2'},{label:'抽奖3',code:'3'}],
                sForm:{},
                pForm:{},
                tableOrderData: [
                {
                    id:'503200',
                    profile: '--',
                    name: '小明',
                    code: 'Is0fLdo3WCv',
                    prizeName:'--',
                    prize:'笔记本',
                    isGot:'已领取',
                    gotDate:'2019-07-12',
                    oPerson:'张三',
                    remark:'--'
                },
                {
                    id:'503201',
                    profile: '--',
                    name: '小明',
                    code: 'Is0fLdo3WCv',
                    prizeName:'--',
                    prize:'笔记本',
                    isGot:'已领取',
                    gotDate:'2019-07-12',
                    oPerson:'张三',
                    remark:'--'
                },
                {
                    id:'503202',
                    profile: '--',
                    name: '小明',
                    code: 'Is0fLdo3WCv',
                    prizeName:'--',
                    prize:'笔记本',
                    isGot:'已领取',
                    gotDate:'2019-07-12',
                    oPerson:'张三',
                    remark:'--'
                },
                {
                    id:'503203',
                    profile: '--',
                    name: '小明',
                    code: 'Is0fLdo3WCv',
                    prizeName:'--',
                    prize:'笔记本',
                    isGot:'已领取',
                    gotDate:'2019-07-12',
                    oPerson:'张三',
                    remark:'--'
                }],
                tablePersonData: [
                    {
                        id:'100300',
                        profile: '--',
                        name: '小明',
                        index: '1',
                        prizeName:'--',
                        prize:'笔记本',
                        loginData:'2019-07-12',
                        creatDate:'2019-07-12'
                    },
                    {
                        id:'100301',
                        profile: '--',
                        name: '小明',
                        index: '2',
                        prizeName:'--',
                        prize:'笔记本',
                        loginData:'2019-07-12',
                        creatDate:'2019-07-12'
                    },
                    {
                        id:'100302',
                        profile: '--',
                        name: '小明',
                        index: '3',
                        prizeName:'--',
                        prize:'笔记本',
                        loginData:'2019-07-12',
                        creatDate:'2019-07-12'
                    },
                    {
                        id:'100303',
                        profile: '--',
                        name: '小明',
                        index: '4',
                        prizeName:'--',
                        prize:'笔记本',
                        loginData:'2019-07-12',
                        creatDate:'2019-07-12'
                    }],
                personDialogVisible:null
            };
        },
        created(){
            //this.searchOrder()
            let sceneId = this.$route.query.sceneId;
            this.listLuckyDrawPage({sceneidBigint:8839865||sceneId})
            this.winUserList({sceneidBigint:8839865||sceneId})
            //this.showLucckyUserMsg( {sceneidBigint:8839865,pageidBigint:36202})
        },
        mounted(){
        },
        methods: {
            indexMethod(index) {
                return index + 1 ;
            },
            handleTabClick(){

            },
            searchOrder(){

               let sceneId = this.$route.query.sceneId;
               // this.listLuckyDrawPage({sceneidBigint:8839865||sceneId})
                this.winUserList({
                    sceneidBigint:8839865 ||sceneId,
                    nickName:this.sForm.nickName,//昵称
                    awardName:this.sForm.awardName,//奖项名称
                    redemptionCode:this.sForm.redemptionCode//兑奖码
                })
                //this.showLucckyUserMsg( {sceneidBigint:8839865,pageidBigint:this.sForm.status||36202})
            },
            searchPerson(){

            },
            addPerson(){
                // 添加发放人
                this.personDialogVisible = true
            },
            handleDeleteClick(row){
                if (row && row.id) {
                    this.tablePersonData = this.tablePersonData.filter(item=> item.id !== row.id)
                }
            },
            getNowFormatDate() {
                //获取当前时间，格式YYYY-MM-DD
                let date = new Date(),
                    seperator = "-",
                year = date.getFullYear(),
                month = date.getMonth() + 1,
                strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                return year + seperator + month + seperator + strDate;
            },
            personSubmitDialog(){
                let id = this.tablePersonData[this.tablePersonData.length - 1].id;
                this.tablePersonData.push({
                    index: this.tablePersonData.length + 1,
                    id: +id + 1,
                    creatDate: this.getNowFormatDate(),
                    name: this.pForm.name
                });
                this.personDialogVisible = false
            },
            listLuckyDrawPage(param){
                this.$api.get('/tpsReward/listLuckyDrawPage',{sceneidBigint:param.sceneidBigint}, success => {
                    if(success){
                        this.orderStatus = success||[]
                    }
                }, fal => {
                    this.$message.error(fal);
                },!0);// /datamb/
            },
            showLucckyUserMsg(param){
                this.$api.get('/tpsReward/showLucckyUserMsg',
                    {sceneidBigint:param.sceneidBigint,pageidBigint:param.pageidBigint},
                    success => {
                    if(success){
                        this.tableOrderData = success
                    }
                }, fal => {
                    this.$message.error(fal);
                },!0);// /datamb/
            },
            winUserList(param){
                this.$api.post('/winUser/list',
                    {
                        sceneidBigint:param.sceneidBigint,
                        nickName:param.nickName,
                        awardName:param.awardName,
                        redemptionCode:param.redemptionCode},
                    success => {
                        if(success){
                            this.tableOrderData = success
                        }
                    }, fal => {
                        this.$message.error(fal);
                    },!1);// /dataft/
            }
        },
    };
</script>

<style lang="scss">

    .prize-exchange-section{
        background-color: #fff;
        margin: 20px !important;
        border-radius: 20px;
        padding: 10px 20px;
        overflow: auto;
        height: 100%;
        /*width: 100%;*/
    }


</style>